import 'package:drive/drive.dart';
import 'package:flutter/material.dart';
import 'package:flutter_mvc/flutter_mvc.dart';
import 'package:beautiful_demo/common/res.dart';
import 'package:beautiful_demo/common/utils/string.dart';
import 'package:beautiful_demo/common/widget/widget.dart';
import 'package:beautiful_demo/mvc/good/bean/good_bean.dart';

import 'controller.dart';

class SkuTitleItem extends MvcStatelessWidget<GoodPopController> {
  @override
  Widget build(BuildContext context) {
    final prices = StringUtils.splitPrice(c.data.price);
    final data = c.data;
    return Container(
      height: 112.dp,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            width: 12.dp,
          ),
          ClipRRect(
              borderRadius: BorderRadius.circular(8.dp),
              child: CachedImage(
                c.selectSpec.img + "_300x300.",
                fit: BoxFit.cover,
                width: 100.dp,
                height: 100.dp,
              )),
          SizedBox(
            width: 12.dp,
          ),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(
                  height: 25.dp,
                ),
                Text(
                  data.name,
                  style: resTextStyle30.copyWith(fontWeight: FontWeight.w600),
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
                SizedBox(
                  height: 5.dp,
                ),
                Text(
                  "货号：${data.codeNum}",
                  style: resTextStyle7A.copyWith(fontSize: 12.sp),
                ),
                SizedBox(
                  height: 6.dp,
                ),
                Row(
                  children: [
                    Text(
                      "¥",
                      style: resTextStyleMain.copyWith(height: 1.3),
                    ),
                    Text(
                      prices[0],
                      style: resTextStyleMain.copyWith(
                          fontSize: 16.sp, height: 1.1),
                    ),
                    Text(
                      ".${prices[1]}",
                      style: resTextStyleMain.copyWith(height: 1.3),
                    ),
                  ],
                ),
              ],
            ),
          ),
          GestureDetector(
            onTap: () {
              Navigator.of(context).pop();
            },
            child: Container(
              padding: EdgeInsets.only(top: 25.dp, left: 5.dp, right: 12.dp),
              child:Icon(Icons.close,size: 20.dp,),
            ),
          )
        ],
      ),
    );
  }
}

class Spec1Item extends MvcStatelessWidget<GoodPopController> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 44.dp,
      color: Color(0xffF6F6F8),
      child: Row(
        children: [
          SizedBox(
            width: 3.dp,
          ),
          Icon(
            Icons.arrow_back_ios_outlined,
            size: 18.dp,
          ),
          Expanded(
              child: ListView.builder(
            padding: EdgeInsets.only(),
            scrollDirection: Axis.horizontal,
            itemBuilder: (ctx, index) {
              final item = c.thisSku[index];
              return _buildItem(item.name, item.num, c.selectSpec == item, () {
                c.onSpecClick(item);
              });
            },
            itemCount: c.thisSku.length,
          )),
          Icon(
            Icons.arrow_forward_ios_outlined,
            size: 18.dp,
          ),
          SizedBox(
            width: 3.dp,
          )
        ],
      ),
    );
  }

  Widget _buildItem(String title, int num, bool isSelect, Function onTap) {
    final color = isSelect ? resMainColor : Color(0xff302F2F);
    final bottomWidth = isSelect ? 28.dp : 0.dp;
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: 76.dp,
        decoration: BoxDecoration(color: Color(0x01ffffff)),
        padding: EdgeInsets.only(left: 8.dp, right: 8.dp),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Column(
              children: [
                Expanded(
                  child: Container(
                    padding: EdgeInsets.only(top:14.dp),
                    child: Text(
                      title,
                      style: resTextStyle.copyWith(color: color),
                    ),
                  ),
                ),
                Container(
                  width: 28.dp,
                  height: 2.dp,
                  alignment: Alignment.center,
                  child: AnimatedContainer(
                    width: bottomWidth,
                    duration: Duration(milliseconds: 800),
                    curve: Curves.fastLinearToSlowEaseIn,
                    height: 2.dp,
                    decoration: BoxDecoration(
                        color: resMainColor,
                        borderRadius: BorderRadius.circular(2.dp)),
                  ),
                ),
              ],
            ),
            Visibility(
              visible: num > 0,
              child: Container(
                height: 16.dp,
                margin: EdgeInsets.only(left: 4.dp,top: 7.dp,),
                alignment: Alignment.centerLeft,
                decoration: BoxDecoration(
                    color: resMainColor,
                    borderRadius: BorderRadius.circular(8.dp)),
                padding: EdgeInsets.only(left: 6.dp, right: 6.dp),
                child: Text(
                  num.toString(),
                  style: resTextStyle.copyWith(
                      color: Colors.white, fontSize: 12.sp),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class StatisticsItem extends MvcStatelessWidget<GoodPopController> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 28.dp,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Text(
            "共 ${c.allNum} 件",
            style: resTextStyle30.copyWith(fontSize: 12.sp),
          ),
          SizedBox(
            width: 16.dp,
          ),
          Text(
            "￥${c.allPrice}",
            style: resTextStyleMain.copyWith(fontSize: 12.sp),
          ),
          SizedBox(
            width: 12.dp,
          ),
        ],
      ),
    );
  }
}

class SkuItem extends StatelessWidget {
  final GoodDataSkuBean item;
  final GoodPopController c;

  SkuItem(this.item, this.c);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 51.dp,
      child: Column(
        children: [
          Container(
            height: 49.dp,
            child: Row(
              children: [
                Expanded(
                    child: Container(
                        padding: EdgeInsets.only(left: 16.dp),
                        child: Text(
                          item.name,
                          style: resTextStyle30.copyWith(
                              fontWeight: FontWeight.w600),
                        ))),
                Expanded(
                    child: Text(
                  "¥${item.price}",
                  style: resTextStyle7A.copyWith(fontSize: 12.sp),
                )),
                Expanded(
                    child: Text(
                  "库存：${item.stockNum}",
                  style: resTextStyle7A.copyWith(fontSize: 12.sp),
                )),
                NumWidget(
                  num: item.num,
                  maxNum: int.parse(item.stockNum),
                  onListener: (num) {
                    item.num = num;
                    c.onSkuNumChange();
                  },
                ),
                SizedBox(
                  width: 12.dp,
                )
              ],
            ),
          ),
          Container(
            height: 1.dp,
            color: Color(0xfff2f2f2),
            margin: EdgeInsets.only(left: 12.dp, right: 12.dp),
          )
        ],
      ),
    );
  }
}
